<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>baby李的自我介绍</title>

    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.4/font/bootstrap-icons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/icon-animation.css" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  </head>

  <body>
    <section id="hero">
      <div class="hero-table">
        <div class="hero-table-center">
          <div class="container">
            <div class="row justify-content-center">
              <div class="col-lg-12" style="text-align: center">
                <h5>Hello!I'M</h5>
                <h1>baby李 | 鸽橘 | 添柴魔法少男🤣</h1>
                <h4>这是我的自我介绍🙋‍♂️ （原个人简历）</h4>
              </div>
              <div class="hero-icon">
                <a href="#about" style="color: black">
                  <i class="bi bi-arrow-down-circle hero-icon-animation"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="nav" class="py-5">
      <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-white">
          <a class="navbar-brand" href="#">简历导航</a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#about">
                  个人介绍
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#service">服务列表</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#exhibition">作品展示</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#team">团队成员</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#work">荣誉展示</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#news">最近动态</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#footer">版权声明</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </section>

    <section id="about" class="pt-5 py-5">
      <div class="container">
        <div class="row align-items-center pb-5">
          <div class="col-lg-8">
            <div class="mt-3">
              <h2 class="sub-title">——————介绍一下我自己</h2>
              <h4 class="mt-4">
                Hello
                <span class="font-weight-bold">I'm baby李~</span>
              </h4>
              <p class="text-muted mt-4 introduce-text text-justify">
                我叫李俊杰，今年20岁，就读于常州信息职业技术学院-软件技术专业。由于非常喜欢本专业，并期待将来从事专业方向的工作，因而在校期间十分注重对专业课的学习，拥有扎实的JavaSE基础，良好的编程风格;熟悉JSP+Servlet+JavaBean模式的WEB开发;熟悉Spring5，SpringMVC，Mybatis等开源框架，了解EJB;
                熟悉Tomcat，Jboss服务器等，熟悉基于Linux及Unix环境下的软件开发。
              </p>
              <div class="row">
                <div class="col-md-6">
                  <ul class="about-info">
                    <li class="mt-3">
                      姓名:
                      <span class="text-muted ml-3">李俊杰</span>
                    </li>
                    <li class="mt-3">
                      邮箱:
                      <span class="text-muted ml-3">2105451348@qq.com</span>
                    </li>
                    <li class="mt-3">
                      地址:
                      <span class="text-muted ml-3">常州信息职业技术学院</span>
                    </li>
                    <li class="mt-3">
                      班级:
                      <span class="text-muted ml-3">软件201</span>
                    </li>
                  </ul>
                </div>
                <div class="col-md-6">
                  <ul class="about-info">
                    <li class="mt-3">
                      生日:
                      <span class="text-muted ml-3">2001-10-19</span>
                    </li>
                    <li class="mt-3">
                      网站:
                      <a href="https://babyly233.github.io/" target="_blank">
                        <span class="text-muted ml-3">
                          babyly233.github.io
                        </span>
                      </a>
                    </li>
                    <li class="mt-3">
                      电话:
                      <span class="text-muted ml-3">139-5284-1426</span>
                    </li>
                    <li class="mt-3">
                      学号:
                      <span class="text-muted ml-3">20091230115</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="mt-4 pt-2">
                <h5>
                  任意门
                  <span class="badge badge-pill badge-primary">
                    点击跳转外站 <i class="bi bi-box-arrow-in-up-right"></i>
                  </span>
                </h5>
                <a
                  href="https://withzhou.xyz"
                  class="btn btn-outline-danger btn-lg"
                  target="_blank"
                >
                  我的个人博客
                </a>
                &emsp;
                <a
                  href="https://space.bilibili.com/6466658"
                  class="btn btn-outline-success btn-lg"
                  target="_blank"
                >
                  我的B站主页
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="mt-3 about-img">
              <img
                src="./img/author.jpg"
                alt="author"
                class="img-fluid rounded-lg"
              />
            </div>
          </div>
        </div>
        <div class="row align-items-center mt-5">
          <div class="col-lg-6">
            <h4>技 术 栈</h4>
            <p class="mt-3 text-muted introduce-text">
              Java 程序员，深刻理解 Object Oriented
              Programming（面向对象编程）这一概念是必须的。像 Java
              这些面向对象编程语言的美。光学习 OO
              原则的定义用处不大，关键是要学会如何应用这些原则用一种 OO
              的方式去设计解决方案。因此，我们应该对对象建模、继承、多态、设计模式有一个很好的认识。
            </p>
          </div>
          <div class="col-lg-6">
            <div id="skills" class="pt-4 mt-4">
              <div class="skill-bar mb-5">
                <span class="skill-title">Java</span>
                <div class="progress pg-h">
                  <div
                    class="progress-bar"
                    role="progressbar"
                    style="width: 90%"
                    aria-valuenow="90"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <span class="skill-percent">90%</span>
                </div>
              </div>

              <div class="skill-bar mb-5">
                <span class="skill-title">Html</span>
                <div class="progress pg-h">
                  <div
                    class="progress-bar"
                    role="progressbar"
                    style="width: 65%"
                    aria-valuenow="65"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <span class="skill-percent">65%</span>
                </div>
              </div>

              <div class="skill-bar mb-5">
                <span class="skill-title">Python</span>
                <div class="progress pg-h">
                  <div
                    class="progress-bar"
                    role="progressbar"
                    style="width: 50%"
                    aria-valuenow="50"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <span class="skill-percent">50%</span>
                </div>
              </div>

              <div class="skill-bar mb-5">
                <span class="skill-title">C</span>
                <div class="progress pg-h">
                  <div
                    class="progress-bar"
                    role="progressbar"
                    style="width: 35%"
                    aria-valuenow="35"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                  <span class="skill-percent">35%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="service" class="pt-5 pb-5 mt-5">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-12">
            <div class="text-left">
              <h2 class="sub-title">——————更好地了解我</h2>
              <h4 class="mt-4">我所能提供的服务</h4>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="card-deck mt-3">
            <div class="card shadow">
              <div class="card-body">
                <i class="bi bi-alarm card-icon"></i>
                <h5 class="card-title">工作准时</h5>
                <h6 class="card-subtitle mb-2">一切都在预期之内</h6>
                <p class="card-text ct">
                  准时上班是对工作最起码的负责任的态度。这是对工作负责的开始，坚持准时上班可以强化您的责任感，对工作更有责任和追求。
                </p>
              </div>
            </div>
            <div class="card shadow">
              <div class="card-body">
                <i class="bi bi-arrow-left-right card-icon"></i>
                <h5 class="card-title">换位思考</h5>
                <h6 class="card-subtitle mb-2">你为我，我为你</h6>
                <p class="card-text ct">
                  在一个团队之中，只有换位思考，才可能增强凝聚力。
                  对于一个管理者来说，换位思考的能力是能否成功进行管理的一个重要因素。
                </p>
              </div>
            </div>
            <div class="card shadow">
              <div class="card-body">
                <i class="bi bi-moon-stars card-icon"></i>
                <h5 class="card-title">熬夜工作</h5>
                <h6 class="card-subtitle mb-2">不辛苦</h6>
                <p class="card-text ct">
                  日常熬夜，效率极高，但奉劝各位逐渐改掉这个坏习惯。
                </p>
              </div>
            </div>
          </div>

          <div class="card-deck mt-5">
            <div class="card shadow">
              <div class="card-body">
                <i class="bi bi-lightning card-icon"></i>
                <h5 class="card-title">极速效率</h5>
                <h6 class="card-subtitle mb-2">快到你不敢相信</h6>
                <p class="card-text ct">
                  一般工作的效率很高的人，他们都有一个属于自己的计划，在第二天的工作开始之前，他们就会提前做好自己的时间规划。
                </p>
              </div>
            </div>
            <div class="card shadow">
              <div class="card-body">
                <i class="bi bi-lightbulb card-icon"></i>
                <h5 class="card-title">创新想法</h5>
                <h6 class="card-subtitle mb-2">点子王就是我</h6>
                <p class="card-text ct">
                  创新意识促成社会多种因素的变化，推动社会的全面进步。创新意识根源于社会生产方式，它的形成和发展必然进一步推动社会生产方式的进步，从而带动经济的飞速发展，促进上层建筑的进步。
                </p>
              </div>
            </div>
            <div class="card shadow">
              <div class="card-body">
                <i class="bi bi-github card-icon"></i>
                <h5 class="card-title">技能过硬</h5>
                <h6 class="card-subtitle mb-2">实力才是硬道理</h6>
                <p class="card-text ct">
                  有清晰的的逻辑思维，对于问题能够快速得出模型及解决方案，自己不会进入死循环。对数据及算法敏感，喜欢精益求精。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="exhibition" class="pb-5 mt-5 pt-5">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="text-left">
              <h2 class="sub-title">——————我们有什么</h2>
              <h4 class="mt-4">看看我们的作品</h4>
            </div>
          </div>
        </div>

        <div class="row mt-4">
          <div class="col-lg-12 pb-5">
            <div class="bd-example">
              <div
                id="carouselExampleCaptions"
                class="carousel slide"
                data-ride="carousel"
              >
                <ol class="carousel-indicators">
                  <li
                    data-target="#carouselExampleCaptions"
                    data-slide-to="0"
                    class="active"
                  ></li>
                  <li
                    data-target="#carouselExampleCaptions"
                    data-slide-to="1"
                  ></li>
                  <li
                    data-target="#carouselExampleCaptions"
                    data-slide-to="2"
                  ></li>
                </ol>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img
                      src="./img/carousel1.jpg"
                      class="d-block w-100"
                      alt="carousel1"
                    />
                    <div class="carousel-caption d-none d-md-block">
                      <h5>数据结构Java实现</h5>
                      <p>
                        稀疏数组的处理方式是:记录数组一共有几行几列，有多少个不同值；把具有不同值的元素和行列及值记录在一个小规模的数组中，从而缩小程序的规模
                      </p>
                    </div>
                  </div>
                  <div class="carousel-item">
                    <img
                      src="./img/carousel2.jpg"
                      class="d-block w-100"
                      alt="carousel2"
                    />
                    <div class="carousel-caption d-none d-md-block">
                      <h5>网页代码</h5>
                      <p>想不到吧，这就是最后的网页代码，放上来凑凑数</p>
                    </div>
                  </div>
                  <div class="carousel-item">
                    <img
                      src="./img/carousel3.jpg"
                      class="d-block w-100"
                      alt="carousel3"
                    />
                    <div class="carousel-caption d-none d-md-block">
                      <h5>Ruoyi若依</h5>
                      <p>基于SpringBoot的权限管理系统</p>
                    </div>
                  </div>
                </div>
                <a
                  class="carousel-control-prev"
                  href="#carouselExampleCaptions"
                  role="button"
                  data-slide="prev"
                >
                  <span
                    class="carousel-control-prev-icon"
                    aria-hidden="true"
                  ></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a
                  class="carousel-control-next"
                  href="#carouselExampleCaptions"
                  role="button"
                  data-slide="next"
                >
                  <span
                    class="carousel-control-next-icon"
                    aria-hidden="true"
                  ></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="team" class="pb-5 mt-5">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="text-left">
              <h2 class="sub-title">——————我的伙伴们</h2>
              <h4 class="mt-4">优秀的团队</h4>
            </div>
          </div>
        </div>

        <div class="row mt-4">
          <div class="col-md-6 col-lg-4">
            <div id="t1" class="team-box">
              <div id="t1-1" class="">
                <h3 id="title1" class="title">桐 人</h3>
                <p id="p1" class="tp">我的保镖，其他人都叫他“封闭者”</p>
              </div>
              <img src="./img/team1.jpg" alt="team1" class="img-fluid" />
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div id="t2" class="team-box">
              <div id="t2-1" class="box-t">
                <h3 id="title2" class="title">西 莉 卡</h3>
                <p id="p2" class="tp">可爱的女孩子，有一只同样可爱的召唤兽</p>
              </div>
              <img src="./img/team2.jpg" alt="team2" class="img-fluid" />
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div id="t3" class="team-box">
              <div id="t3-1" class="box-t">
                <h3 id="title3" class="title">亚 丝 娜</h3>
                <p id="p3" class="tp">我保镖的女朋友，人送外号“闪光”</p>
              </div>
              <img src="./img/team3.jpg" alt="team3" class="img-fluid" />
            </div>
          </div>
        </div>

        <div class="row justify-content-center">
          <div class="col-lg-12 text-center">
            <img src="./img/funnyPic.jpg" alt="funnyPic" class="img-fluid" />
            <p class="text-muted">这么强大的团队，还怕完不成项目吗</p>
          </div>
        </div>
      </div>
    </section>

    <section id="work" class="pb-5">
      <div class="container">
        <div class="text-center">
          <div class="container">
            <div class="row">
              <div class="col-12 col-sm-6 col-md-3 mt-sm-0">
                <div class="work-icon">
                  <i class="bi bi-code wi"></i>
                </div>
                <div class="work-content">
                  <span class="work-number">5.8k Lines</span>
                </div>
                <p class="mb-0">代 码 贡 献</p>
              </div>

              <div class="col-12 col-sm-6 col-md-3 mt-sm-0 mt-5">
                <div class="work-icon">
                  <i class="bi bi-calendar-check wi"></i>
                </div>
                <div class="work-content">
                  <span class="work-number">12</span>
                </div>
                <p class="mb-0">项 目 完 成</p>
              </div>

              <div class="col-12 col-sm-6 col-md-3 mt-sm-0 mt-5">
                <div class="work-icon">
                  <i class="bi bi-award wi"></i>
                </div>
                <div class="work-content">
                  <span class="work-number">3</span>
                </div>
                <p class="mb-0">目 前 获 奖</p>
              </div>

              <div class="col-12 col-sm-6 col-md-3 mt-sm-0 mt-5">
                <div class="work-icon">
                  <i class="bi bi-star wi"></i>
                </div>
                <div class="work-content">
                  <span class="work-number">41</span>
                </div>
                <p class="mb-0">S t a r</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="news" class="pb-5 mt-5">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-12">
            <div class="text-left">
              <h2 class="sub-title">——————最新消息</h2>
              <h4 class="mt-4">看看我们最近的动态</h4>
            </div>
          </div>
        </div>

        <div class="row mt-5">
          <div class="col-lg-4 mt-3">
            <div class="bg-light">
              <div class="news-img">
                <img src="./img/news2.png" alt="news1" class="img-fluid" />
              </div>
              <div class="p-4 news-content">
                <h6>2021-6-25</h6>
                <h5>微软正式推出Windows 11系统</h5>
                <a href="javascript:;">阅读原文</a>
              </div>
            </div>
          </div>

          <div class="col-lg-4 mt-3">
            <div class="bg-light">
              <div class="news-img">
                <img src="./img/news3.jpg" alt="news2" class="img-fluid" />
              </div>
              <div class="p-4 news-content">
                <h6>2021-7-2</h6>
                <h5>最新 Linux 命令总结 大全</h5>
                <a href="javascript:;">阅读原文</a>
              </div>
            </div>
          </div>

          <div class="col-lg-4 mt-3">
            <div class="bg-light">
              <div class="news-img">
                <img src="./img/news4.jpg" alt="news3" class="img-fluid" />
              </div>
              <div class="p-4 news-content">
                <h6>2021-7-12</h6>
                <h5>某大厂程序员“优雅“的跳槽感悟</h5>
                <a href="javascript:;">阅读原文</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="footer" class="py-5">
      <div class="container">
        <div class="row justify-content-center text-center">
          <div class="col-md-12">
            <div class="text-center">
              <a href="#" class="logo">
                <span>baby李的个人简历</span>
              </a>
              <br /><br />
              <p style="color: white">
                2021 ©简历 Designed by
                <a
                  href="https://babyly233.github.io/"
                  target="_blank"
                  style="color: white"
                >
                  baby李
                </a>
              </p>
              <p style="color: white">软件201·20091230115·李俊杰</p>
              <p style="color: white">完成日期：2020年7月4日</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
